/* 把我们所有标签的内外边距清零 */
* {
  margin: 0;
  padding: 0;
  /* css3盒子模型 */
  box-sizing: border-box;
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
  font-style: normal;
}
/* 去掉li 的小圆点 */
li {
  list-style: none;
}
img {
  /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
  border: 0;
  /* 取消图片底侧有空白缝隙的问题 */
  vertical-align: middle;
}
button {
  /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
  cursor: pointer;
}
/* 将页面中所有的a的下划线清除 */
a {
  text-decoration: none;
}
button,
input {
  /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
  font-family: "Microsoft YaHei", "Heiti SC", tahoma, arial, "Hiragino Sans GB", "\5B8B\4F53", sans-serif;
  /* 默认有灰色边框我们需要手动去掉 */
  border: 0;
  outline: none;
}
body {
  /* CSS3 抗锯齿形 让文字显示的更加清晰 */
  -webkit-font-smoothing: antialiased;
  background-color: #fff;
  color: #666;
}
/* 清除浮动 */
.clearfix:after {
  visibility: hidden;
  clear: both;
  display: block;
  content: ".";
  height: 0;
}
.clearfix {
  *zoom: 1;
}
.sin-line {
  /* 第一步：让文字强制一行显示 */
  white-space: nowrap;
  /* 第二步：溢出隐藏 */
  overflow: hidden;
  /* 第三步：溢出的内容省略号显示 */
  text-overflow: ellipsis;
}
.mu-row {
  /* 允许单词内换行 */
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 开启盒子的弹性布局 */
  display: -webkit-box;
  /* 控制第几行出现省略号 */
  -webkit-line-clamp: 2;
  /* 设置子元素从上向下垂直排列 */
  -webkit-box-orient: vertical;
}
body {
  background-color: #ffffff;
}
.top-search {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 999;
  background-color: #ffffff;
  padding: 0.18666667rem 0.4rem;
  height: 1.22666667rem;
  display: flex;
}
.top-search p {
  font-size: 0.34666667rem;
  font-weight: bold;
  width: 1.33333333rem;
  height: 0.85333333rem;
  line-height: 0.85333333rem;
}
.top-search .search {
  flex: 1;
}
.top-search .search input {
  height: 0.85333333rem;
  border-radius: 0.58666667rem;
  background-color: #f7f7f7;
  text-indent: 1.01333333rem;
  line-height: 0.85333333rem;
  padding-bottom: 10px;
  background: url(../icons/header_search.png) no-repeat 0.42666667rem center / 0.26666667rem;
}
.top-search .search input::placeholder {
  color: #bcbcbc;
  font-size: 0.32rem;
}
.top-search .pic {
  height: 0.85333333rem;
  width: 1.14666667rem;
  text-align: right;
}
.top-search .pic img {
  width: 0.48rem;
}
.main {
  padding: 46px 15px 50px;
}
.main .banner .pic {
  box-shadow: 0 10px 5px rgba(0, 0, 0, 0.1);
  height: 3.46666667rem;
}
.main .banner .pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main .banner .change {
  display: flex;
  justify-content: center;
  margin-top: 0.26666667rem;
}
.main .banner .change .box {
  margin-right: 0.21333333rem;
  width: 0.26666667rem;
  height: 0.05333333rem;
  border-radius: 0.10666667rem;
  background-color: #333;
}
.main .nav {
  display: flex;
  margin-top: 0.53333333rem;
  margin-bottom: 0.96rem;
}
.main .nav .left {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  margin-right: 0.26666667rem;
  width: 4.45333333rem;
  height: 1.86666667rem;
  background: url(../icons/nav_1.png) no-repeat 0 0 / cover;
}
.main .nav .right {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  width: 4.45333333rem;
  height: 1.86666667rem;
  background: url(../icons/nav_2.png) no-repeat 0 0 / cover;
}
.main .content {
  margin-bottom: 0.8rem;
}
.main .content .top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.53333333rem;
}
.main .content .top .title {
  font-size: 0.48rem;
  font-weight: bold;
  color: #333;
}
.main .content .top .more img {
  width: 0.21333333rem;
}
.main .content .bottom ul {
  display: flex;
}
.main .content .bottom ul li {
  margin-right: 10px;
  width: 4.53333333rem;
  height: 4.93333333rem;
}
.main .content .bottom ul li a {
  display: block;
  color: #333;
}
.main .content .bottom ul li a .pic {
  margin-bottom: 0.4rem;
  height: 3.06666667rem;
}
.main .content .bottom ul li a .pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main .content .bottom ul li a h4 {
  font-size: 0.34666667rem;
  margin-bottom: 0.21333333rem;
}
.main .content .bottom ul li a p {
  color: #c0c0c0;
  font-size: 0.29333333rem;
}
.main .content .bottom ul li a span {
  font-size: 0.29333333rem;
  color: #f4a522;
}
.main .ad {
  margin-bottom: 0.8rem;
}
.main .ad .pic {
  height: 1.49333333rem;
}
.main .ad .pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main .tuijian {
  margin-bottom: 0.96rem;
  padding: 0 0.4rem;
}
.main .tuijian .top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.64rem;
}
.main .tuijian .top .title {
  font-size: 0.48rem;
  font-weight: bold;
  color: #333;
}
.main .tuijian .top .right {
  display: flex;
  font-size: 0.37333333rem;
}
.main .tuijian .top .right p {
  color: #333;
  margin-right: 0.66666667rem;
}
.main .tuijian .top .right .he {
  font-size: 0.37333333rem;
  color: #b6b6b6;
}
.main .tuijian .list {
  width: 100%;
}
.main .tuijian .list ul {
  width: 100%;
}
.main .tuijian .list ul li {
  width: 100%;
  height: 2.13333333rem;
  display: flex;
  margin-bottom: 1.33333333rem;
}
.main .tuijian .list ul li .pic {
  display: block;
  width: 2.93333333rem;
  height: 2.13333333rem;
  margin-right: 0.42666667rem;
  overflow: hidden;
}
.main .tuijian .list ul li .pic img {
  border-radius: 5px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main .tuijian .list ul li .text {
  color: #cdcdcd;
  display: block;
}
.main .tuijian .list ul li .text h3 {
  color: #333;
  font-size: 0.37333333rem;
  margin-bottom: 0.21333333rem;
}
.main .tuijian .list ul li .text p {
  width: 5.73333333rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.26666667rem;
  margin-bottom: 0.21333333rem;
}
.main .tuijian .list ul li .text .bottom {
  display: flex;
  font-size: 0.26666667rem;
}
.main .tuijian .list ul li .text .bottom .first {
  text-align: center;
  margin-right: 0.26666667rem;
  line-height: 0.4rem;
  width: 1.2rem;
  height: 0.4rem;
  border: 1px solid #cdcdcd;
}
.main .tuijian .list ul li .text span {
  color: #f4a522;
  font-size: 0.34666667rem;
}
.main .more a {
  display: block;
  font-size: 0.34666667rem;
  text-align: center;
  line-height: 1.01333333rem;
  color: #a6a6a6;
  width: 6.93333333rem;
  height: 1.01333333rem;
  border-radius: 0.66666667rem;
  background-color: #f2f2f3;
  margin: 0.64rem 1.2rem;
}
.main .story {
  border-radius: 5px;
  overflow: hidden;
}
.main .story a {
  display: block;
}
.main .story a .pic {
  height: 2.26666667rem;
}
.main .story a .pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.toolbar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.33333333rem;
  z-index: 999;
  margin-top: 1.6rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  background-color: #ffffff;
}
.toolbar ul {
  display: flex;
  justify-content: space-evenly;
  text-align: center;
}
.toolbar ul li {
  margin-top: 0.13333333rem;
}
.toolbar ul li a img {
  width: 0.53333333rem;
}
.toolbar ul li a p {
  margin-top: 0.13333333rem;
  font-size: 0.29333333rem;
  color: #333;
  font-weight: bold;
}
